<template>
	<view class="box" :style="theme">
		<view class="box_switch">
			<view class="flex head">
				<view class="f26 c6">
					当前场馆：
				</view>
				<image class="box_switch_left_imga" :src="imgHost+'/home_ic_location.png'"></image>
				<view class="f28 c2">
					{{venueName}}
				</view>
			</view>
			<view class="box_switch_right flex">
				<image :src="imgHost+'/ic_search.png'" @click="getList"></image>
				<input v-model="inputValue" confirm-type="search" @confirm="getList" placeholder="输入场馆名称" />
			</view>
		</view>
		<!-- 列表 -->
		<view class="box_list">
			<view v-for="(item, index) in list" :key="index" class="box_list_item">
				<view class="box_list_item_s">
					<view class="box_list_item_a" @click="jump5(item)">
						<view class="box_list_item_a_hz">
							<image :src="item.showLogo?item.showLogo:imgHost+'/default_changguan.jpg'"></image>
						</view>
					</view>
					<view class="box_list_item_b" @click="jump5(item)">
						<view class="name flex flex_between">{{item.name}}<text
								v-if="item.distance">{{item.distance}}km</text></view>
						<view class="yytime">营业时间：{{item.openTimeStart}} ~ {{item.openTimeEnd}}</view>
						<view class="box_list_item_b_index limit-1-line">
							<u-icon color="#666666" name="map" size="22rpx" />
							<text class="limit-1-line">{{item.detailedAddress}}</text>
							<u-icon color="#666666" name="arrow-right" size="22rpx" />
						</view>
					</view>
					<view class="box_list_item_c">
						<view v-if="item.distance"><text>{{item.distance}}km</text></view>
						<view class="daohan" @click="jump4(item)">门店详情</view>
					</view>
				</view>
			</view>
			<view v-if="list.length === 0" class="no-order">
				<image :src="imgHost+'/default_nodata.png'"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				inputValue: '',
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump4(item) {
				this.$store.commit('setVenueName', item.name);
				this.$store.commit('setAlbumStatus', item.albumStatus);
				this.$store.commit('setVenuephone', item.telephone);
				this.$store.commit('setVenueId', item.id);
				if (this.shopHome == 0) {
					this.$store.commit('setVenue', true);
					uni.redirectTo({
						url: '/pages/venue/detail?id=' + item.id
					})
				} else {
					uni.redirectTo({
						url: '/pages/venue/indexShop?id=' + item.id
					})
				}
				
			},
			jump5(item) {
				this.$store.commit('setVenueName', item.name);
				this.$store.commit('setAlbumStatus', item.albumStatus);
				this.$store.commit('setVenuephone', item.telephone);
				this.$store.commit('setVenueId', item.id);
				if (this.shopHome == 0) {
					this.$store.commit('setVenue', true);
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.redirectTo({
						url: '/pages/venue/indexShop?id=' + item.id
					})
				}
			},
			tabclick(e) {
				this.swiperIndex = e.index;
			},
			getList() {
				this.$app.ajax({
					api: this.$api.getVenue(),
					data: {
						userId: this.userInfo.id,
						param: {
							name: this.inputValue,
							openStatus: '1',
							lat: '',
							lng: '',
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.box {
		box-sizing: border-box;
	}

	.box_switch {
		padding: 22rpx 30rpx 20rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.head {
			margin-bottom: 20rpx;
			box-sizing: border-box;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 8rpx;
			}
		}
	}

	.box_switch_right {
		width: 100%;
		height: 76rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
		}
	}

	.van-search {
		padding: 0 !important;
	}

	.box_list {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}

	.box_list_item {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 24rpx;
		background: #ffffff;
		border-radius: 8rpx;
		justify-content: space-between;
	}

	.box_list_item_a {
		width: 120rpx;
		height: 120rpx;
		flex: none;
	}

	.box_list_item_a image {
		width: 100%;
		height: 100%;
	}

	.box_list_item_b {
		margin-left: 30rpx;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
	}

	.box_list_item_b .name {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;

		text {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}

	.box_list_item_b .yytime {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_list_item_b_index {
		display: flex;
		align-items: center;
	}

	.box_list_item_b_index text {
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		margin-left: 5rpx;
	}

	.box_list_item_a_hz {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.box_list_item_c {
		width: 120rpx;
		margin-left: 10rpx;
		flex: none;
	}

	.box_list_item_c text {
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_list_item_s {
		display: flex;
		width: 100%;
	}

	.van-icon {
		z-index: 1;
	}

	.daohan {
		margin-top: 40rpx;
		width: 100%;
		line-height: 50rpx;
		border: 1px solid $color;
		border-radius: 10rpx;
		text-align: center;
		color: $color;
		font-size: 26rpx;
	}

	.daohan image {
		width: 30rpx;
		vertical-align: middle;
		height: 30rpx;
	}
</style>